<template>
  <div class="order" id="transition">
      <div class="header" >
            <div class="left fl" @click="Return">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="in fl">{{this.$route.query.title}}</div>
        </div>
        <div class="orderMain">
            <!-- <div  class="order-box">
                <p  v-for="(c,index) in t" :key="c.index" @click="btn(index)" >
                    <a :class="{active:index===nowIndex}">{{c.item}}</a>
                </p>
            </div> -->
            <ul class="upper">
            <li class="fl" v-for="(list,index) in upper" :key="index"><span  class="list"  @click="btn(index)" :class="{active:index===phoneIndex}">{{list.name}}</span></li>
          </ul>
            <div class="order-box2" >
               <div v-show="nowIndex===0">
                    <!-- v-for="(list,index) in orders" :key="index"    -->
                     <div class="orders">
                        <div class="order" >
                            <!-- <img :src="list.img"> -->
                            <img src="static/img/tou.jpg" alt="">
                         
                            <div class="order-div">
                                <h5>ddddgggggg</h5>
                                <!-- <p class="order-div-color">颜色:黑</p> -->
                                <p class=""><span>支付：44{{list.price}}</span><span>预计赚：44{{list.price}}</span></p>
                                <p class="">下单时间: 2017-1-1 2:3:3</p>
                                <p class="">订单状态: 已成团</p>
                            </div>
                            <div class="order-div-2">
                           
                            </div>
                        </div>
                        <div class="order-3">
                             <!-- <a @click.stop="odetails(list)">查看详情</a> -->
                            <!-- <a @click.stop="odefault(index)">订单删除</a> -->
                        </div>
                    </div>
               </div>
            </div>
        </div>
  </div>
</template>

<script>
import axios from "axios";
import { Navbar, TabItem } from "mint-ui";
import { mapState, mapMutations, mapGetters } from "vuex";
import OrderHeader from "../common/Header";
// import func from './vue-temp/vue-editor-bridge';
export default {
  name: "AllOrder",
  data() {
    return {
      nowIndex: 0,
      list:[],
       upper: [
        {name:"待拼团"},
        {name:"已拼团"},
        {name:"已确认收货"},
        {name:"审核成功"},
        {name:"审核失败"}
      ],
       phoneIndex: 0      
    };
  },
  mounted:function(){
    this.getData()
  },
  components: {
    OrderHeader
  },
  computed: {
    orders() {
      return this.$store.state.orders;
    }
  },
  methods: {
    ...mapMutations(["odefault"]),
    btn(index) {
      var _this = this;
       _this.phoneIndex = index;
      // _this.PartsLower = _this.list[index];
      var cat_id =this.$route.query.cat_id;
      var title =this.$route.query.title;
      if(index==1){
        // var state=8;
        this.getData();
      }else if(index==2){
        var state=1;
        this.getData(state);
      }else if(index==3){
        var state=2;
        this.getData(state);
      }else if(index==4){
        var state=3
      }else{
        var state=4
        this.getData(state);
      }
    },
    getData:function(state){
        var _this=this
        axios.get(
            "/api/common/orderspdd/list",
            {
                params:{
                // state:state
                }
            }).then(function(res){
        console.log(res)
        // _this.todos=res.data.data
      })
    },
    Return() {
        this.$router.go(-1)
     },
    // btn(num) {
    //   this.nowIndex = num;
    // },
    odetails(list){
        this.$router.push({
            path: "OrderDetails", 
            query:{
                id:list.id,
                text:list.text,
                ly:list.ly,
                listname:list.listname,
                value:list.value
            }
        })
        console.log(list)
    }
  }
};
</script>


<style lang="stylus" scoped>
.active {
  color: #333;
  border-bottom: 2px solid #ff4040;
}
h5{
    font-size .35rem
}
p{
    font-size .25rem
}
img{
    width 2.5rem
}
.order-box2{
    padding-top 1rem
}
.upper {
  width: 100%;
  height: 1.2rem;
  line-height: .8rem;
  position: fixed;
  color #898989
  background: #ffffff;
  z-index: 1;
}
.upper li{
  width 19%
  text-align center
}
.upper span{
  font-size .3rem
  color #898989
  // display inline-block
  padding 0.1rem .1rem
}
.orderMain
    padding-top 1rem


.orders
    margin-top 10px
    line-height .5rem
    .order 
        width 100%
        height 3rem
        background white
        border-bottom 1px solid #f0f0f0
        border-top 1px solid #f0f0f0
        img 
            float left
            margin .2rem
            height 2.5rem
        .order-div 
            width 4rem
            margin .3rem
            line-height .5rem
            float left
            h3
                font-size .5rem
            .order-div-price
                color red
                font-size .4rem
        .order-div-2 
            display inline-block
            float right
            margin .3rem .6rem
            font-size .4rem
.header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
       
        .in
            width 80%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            text-align center
            font-size 0.45rem
        .left
            width 10%; 
            height 100%
            float left
            i 
                font-size: 0.5rem;
                line-height: 1.1rem;
                text-align: center;
                display: block;
        .rigth
            width 10%; 
            height 100%
            float left    
            
</style>

